import React, { Component } from 'react';
import Logo2 from '../../components/logo2/Logo';
import { WingBlank, NavBar, Icon, Toast } from 'antd-mobile';
import {
    Form,
    Input,
    Checkbox,
    Button,
    Radio
} from 'antd';

import AppPage from '../../container/AppPage'// 容器 解决 navbar
import { connect } from 'react-redux';
import { RegisterAction } from '../../actions/user';

import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons';


class Register extends Component {
    constructor(props) {
        super(props)
        this.state = {
            groupId: 0,
            userEmail: '',
            userName: '',
            userPwd: '',
            userRegisterTime: 0
        }

    }

    backHandle = () => {
        this.props.history.push('/login');
    }
    onFinish = userData => {
        let self = this
        let time = new Date().getTime()
        let userName = userData.userName.replace(/\s*/g, "")

        this.setState({
            groupId: userData.groupId,
            userEmail: userData.userEmail,
            userName: userName,
            userPwd: userData.userPwd,
            userRegisterTime: time
        })
        console.log(this.state)
        this.props.RegisterAction(this.state).then(
            () => {
                if (this.props.state.code === 0) {
                    Toast.success('注册成功 ！', 2, () => {
                        self.props.history.push('login')
                    });

                } else {
                    Toast.fail(this.props.state.msg, 2);
                }
            }
        )
    };

    render() {

        return (
            <div>
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                    onLeftClick={this.backHandle}
                >注册</NavBar>
                <AppPage>
                    <Logo2></Logo2>
                    <WingBlank>
                        <Form
                            name="register"
                            onFinish={this.onFinish}
                            labelAlign="left"
                            scrollToFirstError
                        >
                            <Form.Item
                                name="userEmail"
                                // label="E-mail"
                                rules={[
                                    {
                                        type: 'email',
                                        message: '此邮箱无效!',
                                    },
                                    {
                                        required: true,
                                        message: '请输入你的 E-mail!',
                                    },
                                ]}
                            >
                                <Input prefix={<MailOutlined className="site-form-item-icon" />} placeholder="邮箱"
                                    size='large'
                                />

                            </Form.Item>

                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入你的密码!',
                                    },
                                ]}
                                hasFeedback
                            >
                                {/* <Input.Password /> */}
                                <Input.Password
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="密码"
                                    size='large'
                                    maxLength={20}
                                // minLength={6}
                                />
                            </Form.Item>

                            <Form.Item
                                name="userPwd"
                                dependencies={['password']}
                                hasFeedback
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入确认密码!',
                                    },
                                    ({ getFieldValue }) => ({
                                        validator(rule, value) {
                                            if (!value || getFieldValue('password') === value) {
                                                return Promise.resolve();
                                            }

                                            return Promise.reject('俩次输入密码不同!');
                                        },
                                    }),
                                ]}
                            >
                                <Input.Password
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="确认密码"
                                    size='large'
                                    maxLength={15}
                                // minLength={6}
                                />
                            </Form.Item>

                            <Form.Item
                                name="userName"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入你的昵称!',
                                        whitespace: false,
                                    },
                                ]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="昵称"
                                    size='large'
                                    maxLength={6}
                                />
                            </Form.Item>
                            <Form.Item
                                name="groupId"
                                rules={[
                                    {
                                        required: true,
                                        message: '召唤师请选择你的职业!',
                                        // whitespace: true,
                                    },
                                ]}
                            >
                                <Radio.Group>
                                    <Radio value={0}>初中</Radio>
                                    <Radio value={1}>高中</Radio>
                                    <Radio value={2}>其他</Radio>
                                </Radio.Group>

                            </Form.Item>
                            <Form.Item
                                name="agreement"
                                valuePropName="checked"
                                rules={[
                                    {
                                        validator: (_, value) =>
                                            value ? Promise.resolve() : Promise.reject('Should accept agreement'),
                                    },
                                ]}
                            >
                                <Checkbox>
                                    我已阅读并同意 <a href="#">“隐私政策”</a>
                                </Checkbox>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" block size='large'
                                    style={{ height: '47px' }}
                                ><span style={{ fontSize: 18 }}>注册</span> </Button>
                            </Form.Item>
                        </Form>
                    </WingBlank>

                </AppPage>

            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return {
        state: state.user
    }
}
const actionCreator = { RegisterAction }
export default connect(mapStateToProps, actionCreator)(Register);